<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>广西饮食文化</title>
	<meta name="description" content="AOS - Animate On Scroll library using CSS3">
	<meta name="keywords" content="AOS, animate on scroll, css3 scroll animations, simple scroll animations">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body data-aos-easing="ease-out-back" data-aos-duration="1000" data-aos-delay="0">
<!-- 背景图 -->
    <div class="backgrounds overlay section section--code">
        <div class="background aos-init aos-animate" data-aos="fade-in" data-aos-duration="1500" data-aos-anchor=".section--hero" style="background-image: url('image/index/index5.jpg');"></div>
      </div>

    <section class=" jumbotron text-center" style="margin-bottom:0;  background:#202746;">
    <h1 class="pt"> <font face="宋体">广西饮食文化</font></h1>
    <br>
    <div id="demo" class="carousel slide " data-ride="carousel" data-interval="2000">
        <!-- 指示符 -->
        <ul class="carousel-indicators">
          <li data-target="#demo" data-slide-to="0" class="active"></li>
          <li data-target="#demo" data-slide-to="1"></li>
          <li data-target="#demo" data-slide-to="2"></li>
        </ul>
       
        <!-- 轮播图片 -->
        <div class="carousel-inner" >
          <div class="carousel-item active">
            <img src="image/index/index1.jpg" style="width: 1800px; height: 500px;" class="img-fluid"  >
          </div>
          <div class="carousel-item">
            <img src="image/index/index2.jpg" style="width: 1800px; height: 500px;" class="img-fluid"  >
          </div>
          <div class="carousel-item">
            <img src="image/index/index3.jpg" style="width: 1800px; height: 500px;" class="img-fluid" >
          </div>
        </div>
    </div>
        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
          <span class="carousel-control-next-icon"></span>
        </a>
      </section>
  <!-- 导航链接 -->
    <section class="section section--code">
        <div class="container">
            <h2 class="section-title">	  
			<i class="chevron bottom"></i></h2>
            <div class="code code--small code--left aos-init aos-animate" data-aos="fade-up">
                <a href="hdl_1.html"><img src="image/index/index4.jpg" alt="" class="img-fluid">
                <h3 class="pt">广西梧州</h3></a>
            </div>
            <div class="code code--small code--right aos-init aos-animate" data-aos="fade-down">
                <a href="food.html"><img src="image/index/index6.jpg" alt="" class="img-fluid">
                    <h3 class="pt">广西河池</h3></a>
            </div>
            <div class="code code--small code--left aos-init aos-animate" data-aos="fade-right">
                <a href="lsf.html"><img src="image/index/index7.jpg" alt="" class="img-fluid">
                    <h3 class="pt">广西柳州</h3></a>
            </div>
            <div class="code code--small code--right aos-init aos-animate" data-aos="fade-left">
                <a href="tyx.html"><img src="image/index/index8.jpg" alt="" class="img-fluid">
                    <h3 class="pt">广西桂林</h3></a>
                </scetion>
    </div>
    </section>
<!-- 底部 -->
    <section class="section section--more">
        <div class="container">
            <div class="section-group">
                <h3>详情请点击下方链接</h3>
                <a href="https://guangxi.cncn.com/meishi/" class="btn"><span style="color: aliceblue;">广西美食网</span></a>
                <a href="https://baijiahao.baidu.com/s?id=1583378626092067605&wfr=spider&for=pc"  class="btn"><span style="color: aliceblue;">广西特色美食</span></a>
            </div>
        </div>
    </section>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    
    <script>
        AOS.init({
            easing: 'ease-out-back',
            duration: 1000
        });
    </script>
</body>
</html>